<template>
  <view class="head rtl">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="" height="132rpx">
      <view class="bg-topbar-content">
        <view @click="Back">
          <uv-icon name="arrow-left" size="25" color="#fff"></uv-icon>
        </view>
        <view>{{ title }}</view>
        <view></view>
      </view>
    </lg-topbar>
    <view style="padding-left: 20rpx; padding-right: 20rpx;">
      <BgSearch @search="shopSearch" :placeholder="t('Search')" :showAction="true" actionText="搜索" />
    </view>
    <view class="head_select">
      <!-- v-if="SecondaryMenuList.length > 0"  -->
      <view class="select_item" @click="headSecondaryMenu">
        <view class="text">
          {{ currentCategory?.label ?? 'Category' }}
        </view>
        <view class="select_icon">
          <uv-icon name="arrow-down" size="18" color="#fff"></uv-icon>
        </view>
      </view>
      <view class="select_item" @click="headThirdlevel">
        <view class="text">
          {{ currentTab?.label ?? 'Tabs' }}
        </view>
        <view class="select_icon">
          <uv-icon name="arrow-down" size="18" color="#fff"></uv-icon>
        </view>
      </view>
    </view>
  </view>
  <shopCartMenu ref="MenuModel" @BackBallback="BackBallback" @ConfrmBallback="ConfrmBallback" bgStyle="height: 70%;">
    <view class="my_box rtl">
      <view class="" v-show="MenuIndex == 0">
        <view class="menu_list" :class="[i == SecondaryMenuIndex ? 'menu_list_active' : '']"
          v-show="!(i == 0 && SecondaryMenuList.length > 1)" v-for="(item, i) in SecondaryMenuList"
          @click="SecondaryMenuOperation(item, i)" :key="i">
          <view class="menu_list_box">
            <view class="menu_logo">
              <image class="img" v-if="item.logo" :src="item.logo" mode="widthFix"></image>
            </view>
            <view class="menu_title">
              {{ item.label }}
            </view>
          </view>
          <view class="icon">
            <uv-icon class="flip" name="arrow-right"></uv-icon>
          </view>
        </view>
      </view>
      <view class="" v-show="MenuIndex == 1">
        <view class="menu_list" :class="[i == ThirdlevelMenuIndex ? 'menu_list_active' : '']"
          v-for="(item, i) in ThirdlevelMenuList" @click="ThirdlevelMenuOperation(item, i)" :key="i">
          <view class="menu_list_box">
            <view class="menu_logo">
              <image class="img" v-if="item.logo" :src="item.logo" mode="widthFix"></image>
            </view>
            <view class="menu_title">
              {{ item.label }}
            </view>
          </view>
          <view class="">
            <!-- <uv-icon name="arrow-right"></uv-icon> -->
          </view>
        </view>
      </view>

      <view class="menu_box" v-show="MenuIndex == 2">
        <view class="menu_list" :class="levelIndex == i ? 'menu_active' : ''" v-show="!(i == 0 && levelList.length > 1)"
          v-for="(item, i) in levelList" :key="i" @click="levelIndex = i">
          <view class="menu_list_box">
            <view class="menu_logo">
              <image class="img" v-if="item.logo" :src="item.logo" mode="widthFix"></image>
            </view>
            <view class="menu_title">
              {{ item.label }}
            </view>
          </view>
          <view class="">
            <!-- <uv-icon name="arrow-right"></uv-icon> -->
          </view>
        </view>
      </view>
    </view>
  </shopCartMenu>


</template>

<script setup>
import { ref, onMounted, useAttrs } from "vue"
import { useI18n } from "vue-i18n";
import { CartAPI } from "@/api"
import { useDeviceStore } from "@/store"
import shopCartMenu from "./shopCartMenu.vue"
import { onShow } from "@dcloudio/uni-app";
import { useCategoryStore } from '@/store'
import { storeToRefs } from 'pinia'
import BgSearch from "@/components/BgSearch/index.vue"

const $attrs = useAttrs();
const emits = defineEmits(["shopSearch"]);

const categoryStore = useCategoryStore()
const { selectedSecondCategory, selectedThirdCategory, selectedTab } = storeToRefs(categoryStore)
const deviceStore = useDeviceStore()
const title = ref("")
const { t } = useI18n()
const MenuModel = ref()
const carMakeId = ref("")

const SecondaryMenuList = ref([])
const SecondaryMenuIndex = ref(0)
const ThirdlevelMenuList = ref([])
const ThirdlevelMenuIndex = ref(0)
const MenuIndex = ref(0)
const levelList = ref([])
const levelIndex = ref(0)

const currentTab = ref({})
const currentCategory = ref({})
onShow(() => {
  if (selectedSecondCategory.value || selectedThirdCategory.value) {
    currentCategory.value = selectedThirdCategory.value ? selectedThirdCategory.value.label : selectedSecondCategory.value.label
  } else {
    currentCategory.value = ''
  }
  if (selectedTab.value) {
    currentTab.value = selectedTab.value.label
  } else {
    currentTab.value = ''
  }
})


const shopSearch = () => {
  emits("shopSearch");
};

const SecondaryMenuOperation = (data, index) => {
  console.log(data.children, index)
  SecondaryMenuIndex.value = index;
  ThirdlevelMenuList.value = data.children
  setTimeout(() => {
    MenuIndex.value = 1;
    MenuModel.value.isBack = true
  }, 200)
}

const ThirdlevelMenuOperation = (data, index) => {
  console.log(data, index)
  setTimeout(() => {
    ThirdlevelMenuIndex.value = index
  }, 200)
}
const headSecondaryMenu = () => {
  // MenuModel.value.isShow = true
  //  :carMakeId="carMakeId"
  uni.navigateTo({
    url: `/pages/carMark/category?carMakeId=${carMakeId.value}`,
  })
}
const headThirdlevel = () => {
  // MenuModel.value.isShow = true;
  // // levelIndex.value = 1;
  // MenuIndex.value = 2
  uni.navigateTo({
    url: `/pages/carMark/tabs?carMakeId=${carMakeId.value}`
  })
}

// const showSearch = () => {

// }
const Back = () => {

  uni.navigateBack({
    delta: 3
  })
}
let isMeunListquery = false
const queryMeunList = async () => {
  let res = await CartAPI.getCategoryList(carMakeId.value);

  title.value = res[0]?.label || "carMake";
  SecondaryMenuList.value = [{
    label: t("Categories"),
    logo: null
  }, ...res[0]?.children || []];
  console.log("SecondaryMenuList.value.length", SecondaryMenuList.value.length)
  if (SecondaryMenuList.value.length > 1) {
    SecondaryMenuIndex.value = 1
  }
  ThirdlevelMenuList.value = res[0]?.children[0]?.children;
  isMeunListquery = true;
  firstLoading()
}

const BackBallback = () => {
  MenuIndex.value = 0;
  MenuModel.value.isBack = false
}
const ConfrmBallback = () => {
  console.log(MenuIndex.value)
  if (MenuIndex.value == 0) {
    ThirdlevelMenuList.value = SecondaryMenuList.value[SecondaryMenuIndex.value].children
    setTimeout(() => {
      MenuIndex.value = 1;
      MenuModel.value.isBack = true
    }, 200)
    return
  }
  if (MenuIndex.value == 1) {
    if (SecondaryMenuIndex.value == 0) {
      return uni.showToast({
        title: t("Categories"),
        icon: "none"
      })
    }
    levelIndex.value = 0
    emits("ConfrmBallback", {
      "categorySecondId": SecondaryMenuList.value[SecondaryMenuIndex.value].id,
      "categoryThirdId": ThirdlevelMenuList.value[ThirdlevelMenuIndex.value].id
    });
  } else {
    if (levelIndex.value == 0) {
      return uni.showToast({
        title: t("Tabs"),
        icon: "none"
      })
    }
    SecondaryMenuIndex.value = 0
    emits("ConfrmBallback", {
      // "categorySecondId": SecondaryMenuList.value[SecondaryMenuIndex.value].id,
      // "categoryThirdId": ThirdlevelMenuList.value[ThirdlevelMenuIndex.value].id,
      "productLabelId": levelList.value[levelIndex.value]?.id || ''
    });
  }

  MenuModel.value.isShow = false
  MenuIndex.value = 0;
}
let islabelListquery = false
const querylabelList = async () => {
  let res = await CartAPI.getlabelList()
  console.log(res)
  levelList.value.push(...[{
    label: t("Tabs")
  }, ...res])
  islabelListquery = true;
  firstLoading()
}
const firstLoading = () => {
  if (islabelListquery && isMeunListquery) {
    emits("ConfrmBallback", {
      "categorySecondId": SecondaryMenuList.value[SecondaryMenuIndex.value].id,
      "categoryThirdId": ThirdlevelMenuList.value[ThirdlevelMenuIndex.value].id,
      "productLabelId": levelList.value[levelIndex.value]?.id || ''
    });
  }

}
onMounted(() => {
  console.log(deviceStore.MyShop)

  if ($attrs.carMakeId) {
    carMakeId.value = $attrs.carMakeId
  }

  if ($attrs.carMake) {
    title.value = $attrs.carMake
  }
  // querylabelList()
  // queryMeunList()
})
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.bg-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20rpx;
  color: #fff;
}

.my_box {
  padding-bottom: 10rpx;
  overflow-y: scroll;
  height: 100%;
}

.menu_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  overflow-y: auto;

  .menu_list {
    width: 45%;
    box-sizing: border-box;
    margin: 0 auto 20rpx;
  }

  .menu_active {
    border: 1px solid #0f770f;

  }
}

.menu_list.menu_list_active {
  border: 1px solid #0f770f;
}

.menu_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  margin-top: 20rpx;

  .menu_list_box {
    display: flex;
    align-items: center;
  }

  .menu_logo {
    width: 120rpx;

    .img {
      width: 80%;
      margin: 0 auto;
      display: block;
    }
  }

  .menu_title {
    padding-left: 30rpx;
  }

  .icon {
    width: 60rpx;
  }

}

.head {
  background: #127B56;
  border-radius: 0 0 20rpx 20rpx;

  .view_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 20rpx 20rpx;
  }

  .head_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx;

    .select_item {
      width: 45%;
      border: 1px solid #fff;
      border-radius: 10rpx;
      padding: 5rpx 40rpx 5rpx 10rpx;
      color: #fff;
      position: relative;
      height: 50rpx;
      // line-height: 60rpx;

      box-sizing: border-box;
      display: flex;
      align-items: center;

      .text {
        // padding-right: 10rpx;
        overflow: hidden;
        font-size: 22rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        box-sizing: border-box;

      }

      .select_icon {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>